<template>
 <div class="seller">
   <div class="seller-content">
     <div class="seller-header">
        <div class="name">{{seller.name}}</div>
       <div class="line">
         <star :size="36" :score="seller.score"></star>
         <span class="middle">(661)</span>
         <span class="count">月售{{seller.sellCount}}份</span>
       </div>
       <div class="favorite"  @click="toggleFavorite()">
         <span class="icon-favorite" :class="{'active': favorite}"></span>
         <span class="text">{{favoriteText}}</span>
       </div>
     </div>
     <div class="seller-middle">
       <div class="middle-item">
         <span class="title">起送价</span>
         <span class="price">{{seller.minPrice}}</span>元
       </div>
       <div class="middle-item">
         <span class="title">商家配送</span>
         <span class="price">{{seller.deliveryPrice}}</span>元
       </div>
       <div class="middle-item">
         <span class="title">平均配送时间</span>
         <span class="price">{{seller.deliveryTime}}</span>元
       </div>
     </div>
     <split></split>
     <div class="notice">
       <h1 class="title">公告活动</h1>
       <p class="bulletin">{{seller.bulletin}}</p>
       <div class="discounts" v-for="(item,index) in seller.supports">
         <span class="icon" :class="classMap[seller.supports[index].type]"></span>
          <span class="text">{{item.description}}</span>
       </div>
     </div>
     <split></split>
     <div class="seller-outdoor" v-show="seller.pics">
       <h1 class="title">商家实景</h1>
       <div class="pic">
         <div class="pic-wrapper" ref="picWrapper">
           <ul class="pic-list" ref="picList">
             <li v-for="pic in seller.pics" class="pic-item">
               <img :src="pic" width="120" height="90"/>
             </li>
           </ul>
         </div>
       </div>
     </div>
     <split></split>
     <div class="about">
       <h1 class="title">商家信息</h1>
       <ul>
         <li v-for="item in seller.infos" class="info-item">{{item}}</li>
       </ul>
     </div>
   </div>

 </div>
</template>

<script type="text/ecmascript-6">
  import star from "../../components/star/star"
  import split from "../../components/split/split"

  import BScroll from 'better-scroll'
  export default {
    props:{
      seller:{
        type:Object
      }
    },
    data(){
      return{
        favorite :false
      }
    },
    computed :{
      favoriteText(){
        return this.favorite ? '收藏' : '未收藏'
      }
    },
    mounted(){
      this.$nextTick(() => {
        this._initPics()
      })
    },
    watch:{
      'seller'() {
        this.$nextTick(()=>{
          this._initPics();
        })
      }
    },
    created(){
      this.classMap=['decrease', 'discount', 'special', 'invoice', 'guarantee']
    },
    methods:{
      _initPics() {
        if(this.seller.pics){
          //这里之所以要设置宽度，是因为.pic-wrapper和.pic-list的宽度一样大
          //当.pic-list的宽度大于.pic-wrapper的宽度，才能横向滚动
          let picWidth = 120;
          let margin = 6;
          let width = (picWidth + margin) * this.seller.pics.length - margin
          this.$refs.picList.style.width = width + 'px'
          this.$nextTick(() => {
            if(!this.picScroll){
              this.picScroll = new BScroll(this.$refs.picWrapper,{
                scrollX:true
              })
            }else{
              this.picScroll.refresh()
            }
          })
        }
      },
      toggleFavorite(){
        this.favorite = ! this.favorite
      }
    },
    components:{
      star,
      split

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/minix.styl"
.seller
  .seller-content
    .seller-header
      padding 18px 0
      margin 0 18px
      border-1px(rgba(7,17,27,0.1))
      .name
        font-size 14px
        color rgb(7,17,27)
        line-height 14px
        font-weight 700
      .line
        padding-top 8px
        .star
         display inline-block
        .middle
          display inline-block
          margin 0 12px 0 8px
          font-size 14px
          color rgb(77,85,93)
          line-height 18px
        .count
          font-size 12px
          color rgb(77,85,93)
          line-height 18px

      .favorite
        position absolute
        top:18px
        right 18px
        width 50px
        text-align center
        .icon-favorite
          font-size 24px
          line-height 24px
          color #d4d6d9
          &.active
            color rgb(240,20,20)
        .text
          display block
          font-size 10px
          color rgb(77,85,93)
          line-height 24px
  .seller-middle
    padding 0 18px
    display flex
    .middle-item
      flex 1
      margin  18px 0
      text-align center
      font-size 10px
      border-right 1px solid rgba(7,17,27,0.1)
      .title
        display block
        font-size 10px
        color rgb(147,153,159)
        line-height 14px
        margin-bottom 4px
      .price
        font-size 24px
        color rgb(7,17,27)
        line-height 24px


  .notice
    padding  18px
    .title
      font-size 14px
      color rgb(7,17,27)
      line-height 14px
      font-weight 700
    .bulletin
      padding 8px 12px 16px
      font-size 12px
      color rgb(240,20,20)
      line-height 24px
    .discounts
      padding 16px 12px
      box-sizing border-box
      border-top 1px solid rgba(7,17,27,0.1)
      .icon
        display inline-block
        width 16px
        height 16px
        background-size 16px 16px
        margin-right 6px
        vertical-align top
        &.decrease
          bg-image('decrease_4')
        &.discount
          bg-image('discount_4')
        &.guarantee
          bg-image('guarantee_4')
        &.invoice
          bg-image('invoice_4')
        &.special
          bg-image('special_4')
  .seller-outdoor
      padding 18px
      .title
        margin-bottom 12px
        line-height 14px
        color rgb(7,17,27)
        font-size 14px
      .pic-wrapper
        width 100%
        overflow hidden
        white-space nowrap
        .pic-list
          font-size 0
          .pic-item
            display inline-block
            margin-right 6px
            width 120px
            height 90px

  .about
    padding 18px
    .title
      font-size 14px
      color rgb(7,17,27)
      line-height 14px
      font-weight 700
      margin-bottom 12px
    .info-item
      padding 16px 12px
      border-top 1px solid rgba(7,17,27,0.1)
      font-size 12px
      color rgb(7,17,27)
      line-height 16px
</style>
